import React from 'react';
import { Avatar, Grid } from 'antd-mobile';
import { EditSOutline } from 'antd-mobile-icons';
import { useEnhanceSelector } from '@/hooks';
import './UserHeader.scss';

const UserHeader: React.FunctionComponent = () => {

  //用户信息
  const userInfo = useEnhanceSelector((state) => state.userStore.userInfo);

  return (
    <div className="user-header">
      <div className="top">
        <Avatar fit="cover" style={{ '--border-radius': '70px' }} src={userInfo.avatar} />
        <div className="name">
          <span className="account">{userInfo.account}</span> <span className="mobile">{userInfo.mobile}</span>
          <p>
            <EditSOutline></EditSOutline>
            <span>这个人很懒什么都没有</span>
          </p>
        </div>
      </div>
      <div className="bottom">
        <Grid columns={4}>
          <Grid.Item>
            <p>{userInfo.collectionNumber}</p>
            <p>收藏</p>
          </Grid.Item>
          <Grid.Item>
            <p>{userInfo.likeNumber}</p>
            <p>关注</p>
          </Grid.Item>
          <Grid.Item>
            <p>{userInfo.score}</p>
            <p>积分</p>
          </Grid.Item>
          <Grid.Item>
            <p>{userInfo.couponNumber}</p>
            <p>优惠券</p>
          </Grid.Item>
        </Grid>
      </div>
    </div>
  );
};

export default UserHeader;